<template>
	<div v-show="visible" style="margin-left:16px;display: flex;margin-top: 6px;">
		<div style="width:70px;">{{componentModel.label}}</div>
		<van-checkbox-group direction="horizontal" v-model="vue_model">
			<van-checkbox :name="item.value" v-for="(item,index) in selectlist" :key="index">{{item.name}} a</van-checkbox>
		</van-checkbox-group>
	</div>
</template>

<script>
	import {
		sendComponentValueChangeRequest
	} from '@/utils/requestUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "SelectComponent",
		props: ["componentModel", "scope"],
		data() {
			return {
				vue_model:[],
				vue_model_label: "",
				showPicker_model: false,
				selectlist: [],
				selectLabelList: [],
				visible: true,
				readonly: false,
				label: "",
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onConfirm(value) {
				this.vue_model_label = value;
				this.showPicker_model = false;
				this.onValueChangeHandler();
			},
			getValue() {
				for (var i = 0; i < this.selectlist.length; i++) {
					if (this.selectlist[i].name == this.vue_model_label) {
						return this.selectlist[i].value;
					}
				}
			},
			onValueChangeHandler() {
				if (this.scope != undefined) {
					this.$emit("onValueChange", this);
					return;
				}
				sendComponentValueChangeRequest(this);
			},
			setProp(prop) {
				var dataModel = prop["options"];
				if (dataModel != undefined) {
					this.selectlist = dataModel;
					this.selectLabelList.length = 0;
					for (var i = 0; i < this.selectlist.length; i++) {
						this.selectLabelList.push(this.selectlist[i].name);
					}
				}
				for (var k in prop) {
					if (k == "value") {
						if (prop[k] == null) {
							this.vue_model =[];
						} else {
							this.vue_model = prop[k].split(",");
						}
					} else if (k == "visible") {
						this.visible = prop[k];
					} else if (k == "readonly") {
						this.readonly = prop[k];
					} else if (k == "label") {
						this.label = prop[k];
					}
				}
			},
			showPicker() {
				if (this.readonly) {
					return;
				}
				this.showPicker_model = true;
			},
			closePicker() {
				this.showPicker_model = false
			}
		}
	}
</script>

<style>
</style>
